import { useAppSelector } from '@/app/hooks'
import { selectUserSearch } from './slice'

export default function SearchMain () {

  // 读取redux管理的userSearch模块的状态数据
  const {firstView, loading, errorMsg, users} = useAppSelector(selectUserSearch)
  
  if (firstView) {
    return <h3>输入关键字搜索</h3>
  } else if (loading) {
    return <h3>加载中...</h3>
  } else if (errorMsg) {
    return <h3>{errorMsg}</h3>
  }

  // [{name, avatar_url, url}]

  return (
    <div className="row">
      {
        users.map(user => <div className="card" key={user.login}>
          <a href={user.html_url} target="_blank" rel="noreferrer">
            <img src={user.avatar_url} style={{width: 100}} alt=""/>
          </a>
          <p className="card-text">{user.login}</p>
        </div>)
      }
    </div>
  )
}
